﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>看板</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/scanboard.css" />
<link rel="stylesheet" type="text/css" href="css/animsition.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.shCircleLoader.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.shCircleLoader-min.js"></script>
</head>
<body>
	<div id="loader"></div>
	<script type="text/javascript">
		$('#loader').shCircleLoader({color: "#00deff"});
	</script>
	<!--Top Start!-->
	<div class="scanboardWp animsition">
		<div id="top">
			<div class="wp clearfix">
				<div class="left pageTit">
					<a  href="javascript:;" style="width: 400px">系统公告：滨海新区发布大风橙色预警</a>
					<!-- <a class="summaryBtn" href="javascript:;">任务看板</a> -->
					<!-- <a class="summaryBtn" href="javascript:;">报警看板</a> -->
				</div>
			
				<div class="center topLogo">
					<a href="#"><img src="images/logo.png" style="height: 140px;margin-top: -30px" ></a>
				</div>
				<div class="right topBar">
					<div class="topTime">时间加载中...</div>
					<div class="clearfix">
						<a href="javascript:;" class="signOut fr">退出</a>
						<div class="company fr">
							<h3>组长:孙工</h3>
							<div class="dropdown">
								<!-- <a href="#">组长:孙工</a> -->
								<a href="#" >个人信息</a>
								<!-- <a href="#">盈特公司</a> -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Top End!-->
		
		<!--Main Start!-->
		<div id="main" class="wp clearfix">
			<div class="left">
				<!--今日运单数量-->
				<!--本月总报警次数-->
				<div class="item total itembg">
					<div class="itemTit">
						<span class="border-yellow">本月总报警次数</span>
					</div>
					<div class="itemCon">
						<div class="totalNum"><strong id="totalNum" total="368082">0</strong><span>次</span></div>
					</div>
				</div>
				<!-- <div class="item waybill">
					<div class="itemTit">
						<span class="border-yellow">今日运单数量</span>
					</div>
					<div class="itemCon itembg">
						<div class="progress" progress="80%">
							<h3 class="clearfix"><span>正常单</span><i>80单</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
						<div class="progress" progress="15%">
							<h3 class="clearfix"><span>临时单</span><i>15单</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
						<div class="progress" progress="5%">
							<h3 class="clearfix"><span>异常单</span><i>5单</i></h3>
							<div class="progressBar">
								<span></span>
							</div>
							<h4>0%</h4>
						</div>
					</div>
				</div> -->

				<!--即时报警信息-->
				<div class="item billState" style="height: 360px;">
					<div class="itemTit">
						<span class="border-green">即时报警信息</span>
					</div>
					<div class="itemCon">
						<div class="StateBox">
							<div class="StateTit">
								<span>报警类型</span>
								<span>报警时间</span>
								<span>紧急程度</span>
							</div>
							<div id="FontScroll1">
								<ul class="summaryBtn">
									<li>
										<div class="fontInner clearfix">
											<span>跌落报警</span>
											<span>2021-06-18 12:30:21</span>
											<span>
												<div class="" progress="80%">
													<i class="color-yellow"><h4>危险级</h4></i>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>高温报警</span>
											<span>2021-06-18 12:30:21</span>
											<span>
												<div class="" progress="80%">
													<i class="color-blue"><h4>警告级</h4></i>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>低电量报警</span>
											<span>2021-06-18 12:30:21</span>
											<span>
												<div class="" progress="80%">
													<i class="color-green"><h4>常规级</h4></i>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>低电量报警</span>
											<span>2021-06-18 12:30:21</span>
											<span>
												<div class="" progress="80%">
													<i class="color-green"><h4>常规级</h4></i>
												</div>
											</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- <div class="item">
					<div class="itemTit">
						<span class="border-green">即时报警信息</span>
					</div>
					<div class="itemCon">
						<ul class="listStyle">
							<li class="clearfix">
								<span>下单…配车</span>
								<span><strong>3.4</strong>秒</span>
							</li>
							<li class="clearfix">
								<span>配车…装货</span>
								<span><strong>24</strong>分钟</span>
							</li>
							<li class="clearfix">
								<span>到厂卸货</span>
								<span><strong>14</strong>分钟</span>
							</li>
							<li class="clearfix">
								<span>装回收器具</span>
								<span><strong>7</strong>分钟</span>
							</li>
							<li class="clearfix">
								<span>卸回收器具</span>
								<span><strong>5</strong>分钟</span>
							</li>
						</ul>
					</div>
				</div> -->

				<!--人员信息-->
				<div class="item" >
					<div class="itemTit">
						<span class="border-blue">在线人员信息 </span>
					</div>
					<div class="itemCon itembg">
						<ul class="listStyle">
							<li class="clearfix">
								<span>组长：<strong>5</strong>人</span>
								<span>组员：<strong>36</strong>人</span>
								<span>任务专员：<strong>6</strong>人</span>
								<span>监控人员：<strong>2</strong>人</span>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="center">
				<div class="centerWp">
					<!--中间大地图-->
					<div class="mapContainer">
						<div class="btnLayer">
							<div class="search">
								<div class="searchInner">
									<a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
									<form class="searchForm">
										<button class="icoSearch"></button>
										<input type="text" name="" placeholder="请搜索人员姓名">
									</form>
								</div>
							</div>
							<!-- <a href="javascript:;" class="infoBtn"><span class="icoCar"></span></a> -->
						</div>
						<div id="myMap" class="item"></div>
					</div>
					
					<!--月任务统计图-->
					<div class="billChart">
						<div class="itemTit">
							<span class="border-blue">月任务统计图<small>(2021年5月)</small></span>
						</div>
						<div id="myChart1"></div>
					</div>
				</div>
			</div>

			<div class="right">
				<!--本月总任务次数-->
				<div class="item total itembg">
					<div class="itemTit">
						<span class="border-yellow">本月总任务次数</span>
					</div>
					<div class="itemCon">
						<div class="totalNum"><strong id="totalNum" total="368082">0</strong><span>次</span></div>
					</div>
				</div>

				<!--智能安全帽信息-->
				<div class="item basicInfo">
					<div class="itemTit">
						<span class="border-green">智能安全帽信息</span>
					</div>
					<div class="itemCon itembg">
						<div class="infoPie">
							<ul class="clearfix">
								<li class="color-yellow">
									<span class="border-yellow" id="indicator1" total="32">0</span>
									<p>在线数量</p>
								</li>
								<li class="color-green">
									<span class="border-green" id="indicator2" total="65">0</span>
									<p>闲置数量</p>
								</li>
								<li class="color-blue">
									<span class="border-blue" id="indicator3" total="100">0</span>
									<p>设备总数</p>
								</li>
							</ul>
							<div id="indicatorContainer"></div>
						</div>
					</div>
				</div>

				<!--执行中的任务-->
				<div class="item billState">
					<div class="itemTit">
						<span class="border-green">执行中的任务</span>
					</div>
					<div class="itemCon">
						<div class="StateBox">
							<div class="StateTit">
								<span>任务名称</span>
								<span>执行时间</span>
								<span>进度</span>
							</div>
							<div id="FontScroll">
								<ul class="infoBtn">
								
									<li>
										<div class="fontInner clearfix" >
											<span>更换避雷器</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="80%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>线路维护</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="49%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>更换避雷器</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="7%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>线路维护</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="55%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>紧急维护</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="100%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>日常检修</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="94%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									<li>
										<div class="fontInner clearfix">
											<span>日常检修</span>
											<span>2小时15分</span>
											<span>
												<div class="progress" progress="23%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
										</div>
									</li>
									
								
									
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Main End!-->
	</div>

	<div class="filterbg"></div>
	<div class="popup">
		<a href="javascript:;" class="popupClose"></a>
		<div class="infoBox">
			<div class="infoTop">
				<div class="infoTit">
					<!-- <img src="images/tit3.png"> -->
					<i class="color-yellow"><h4>报警详情</h4></i>
				</div>
			</div>
			<div class="infoMain">
				<div class="infoLeft fl">
					<div class="topSearch">
						<form>
							<button></button>
							<input type="text" name="" placeholder="根据设备ID搜索">
						</form>
					</div>
					<div class="carState">
						<h3>
							<span class="fl">报警类型</span>
							<span class="fr">紧急程度</span>
						</h3>
						<ul class="stateUl">
							<li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li>
							<li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li><li>
								<p>低电量报警</p>
								<span class="work">一般报警</span>
							</li>
							<li>
								<p>碰撞报警</p>
								<span class="nowork">危险报警</span>
							</li><li>
								<p>碰撞报警</p>
								<span class="nowork">危险报警</span>
							</li><li>
								<p>碰撞报警</p>
								<span class="nowork">危险报警</span>
							</li><li>
								<p>碰撞报警</p>
								<span class="nowork">危险报警</span>
							</li><li>
								<p>碰撞报警</p>
								<span class="nowork">危险报警</span>
							</li><li>
								<p>碰撞报警</p>
								<span class="nowork">危险报警</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="infoRight fr">
					<div class="rightWp">
						<div class="carIntro">
							<div class="introBox fl">
								<div class="carImg fl">
									<img src="images/maozi1.png">
								</div>
								<div class="carText fl clearfix">
									<p>设备ID：81928371917271911</p>
									<p>维修次数：0次</p>
									<p>设备出厂日期：2020-09-09</p>
									<p>报警日期：2021-6-12 13:12:10</p>
									<p>任务描述：设备电量过低。</p>
									<p>当前状态：<span class="color-green">未处理</span></p>
								</div>
							</div>
							<div class="driver fr">
								<div class="photo">
									<img src="images/photo.jpg">
								</div>
								<p>所属人：李四</p>
							</div>
						</div>
						<div class="timetable">
							<div class="topTool">
								<div class="tableExplain fl">
									<div class="itemExplain fl">
										<span class="bg-green"></span>
										<!--  -->
										<a href="javascript:;" class="prevWeek"><p>开启摄像头监控</p></a>
									</div>
									<div class="itemExplain fl">
										<span class="bg-blue"></span>
										<!--  -->
										
										<a href="javascript:;" class="prevWeek"><p>强制拍照</p></a>
									</div>
									<div class="itemExplain fl">
										<span class="bg-blue"></span>
										<!--  -->
										
										<a href="javascript:;" class="prevWeek"><p>强制下线</p></a>
									</div>
								</div>
								<div class="topBtns fr">
									<a href="javascript:;" class="prevWeek">发起通话</a>
									<a href="javascript:;" class="nextWeek">语音广播</a>
								</div>
							</div>
							<div class="tiemWp">
								<img src="images/shipin.png" style="max-height: 300px;">
								<div class="timeInner">
									
								</div>
								<div class="totalTable">
									
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="carInfo">
		<a href="javascript:;" class="carClose"></a>
		<div class="infoBox">
			<div class="infoTop">
				<div class="infoTit">
					<!-- <img src="images/tit3.png"> -->
					<i class="color-yellow"><h4>任务详情</h4></i>
				</div>
			</div>
			<div class="infoMain">
				<div class="infoLeft fl">
					<div class="topSearch">
						<form>
							<button></button>
							<input type="text" name="" placeholder="输入组长或组员信息进行搜索任务">
						</form>
					</div>
					<div class="carState">
						<h3>
							<span class="fl">任务名称</span>
							<span class="fr">状态</span>
						</h3>
						<ul class="stateUl">
							<li>
								<p>更换避雷器</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="work">进行中</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="nowork">已完成</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="nowork">已完成</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="nowork">已完成</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="nowork">已完成</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="nowork">已完成</span>
							</li>
							<li>
								<p>测试任务</p>
								<span class="nowork">已完成</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="infoRight fr">
					<div class="rightWp">
						<div class="carIntro">
							<div class="introBox fl">
								<div class="carImg fl">
									<img src="images/car.jpg">
								</div>
								<div class="carText fl clearfix">
									<p>任务名称：更换避雷器</p>
									<p>本周工作时长：4.45小时</p>
									<p>计划工作时长：6.00小时</p>
									<p>工作时段：2021-6-12至2021-6-13</p>
									<p>任务描述：某年某月某天因某个原因更换某个避雷器。</p>
									<p>当前状态：<span class="color-green">进行中</span></p>
								</div>
							</div>
							<div class="driver fr">
								<div class="photo">
									<img src="images/photo.jpg">
								</div>
								<p>组长：李四</p>
							</div>
						</div>
						<div class="timetable">
							<div class="topTool">
								<div class="tableExplain fl">
									<div class="itemExplain fl">
										<span class="bg-green"></span>
										<!--  -->
										<a href="javascript:;" class="prevWeek"><p>任务视频资源列表</p></a>
									</div>
									<div class="itemExplain fl">
										<span class="bg-blue"></span>
										<!--  -->
										
										<a href="javascript:;" class="prevWeek"><p>任务图片资源列表</p></a>
									</div>
									<div class="itemExplain fl">
										<span class="bg-blue"></span>
										<!--  -->

										<a href="javascript:;" class="prevWeek"><p>任务成员列表</p></a>
									</div>
								</div>
								<div class="topBtns fr">
									<a href="javascript:;" class="prevWeek">进入群聊</a>
									<a href="javascript:;" class="nextWeek">团队广播</a>
								</div>
							</div>
							<div class="tiemWp">
								<div class="timeInner">
								
								</div>
								<div class="totalTable">
									
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas> 
</body>
<script type="text/javascript" src="js/bg.js"></script>
<script type="text/javascript" src="js/scanboard.js"></script>
<script type="text/javascript" src="js/fontscroll.js"></script>
<script type="text/javascript" src="js/jquery.animsition.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=f8ffe058b8e6f5b05e8ff43ca4207393"></script>
</html>
